<template>
  <div>
    <div class="mg-content">
      <el-row :gutter="24">
        <el-col :span="9">
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">订货门店</div>
            <el-select size="medium" v-model="warehouseId" filterable placeholder="请选择订货门店" style="width:100%;">
              <el-option
                v-for="item in warehouses"
                :key="item.id"
                :label="item.name"
                :disabled="item.state && item.state.key!='NORMAL'"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">订货日期</div>
            <el-select size="medium" v-model="state" filterable placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in yjSate"
                :key="item.key"
                :label="item.name"
                :value="item.key">
              </el-option>
            </el-select>
          </div>

        </el-col>


      </el-row>
      <el-row :gutter="24" style="margin-top: 15px;">
        <el-col :span="9" >
          <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
            <div class="el-input-group__prepend" tabindex="-1">物料类别</div>
            <el-cascader  placeholder="请选择类别" class="el-cascader-margin w-100p"  size="medium"
                         :options="treeData"
                         :show-all-levels="false" v-model="downCategeryId"
                         change-on-select>
            </el-cascader>
          </div>
        </el-col>
        <el-col :span="9"   >
          <el-input size="medium" v-model="input"  @keyup.enter.native="keyDown($event)" placeholder="请输入物料名称" style="width:100%">
            <template slot="prepend">
              <el-button>物料名称</el-button>
            </template>
          </el-input>
        </el-col>
        <el-col :span="6"  style="padding-right: 0px;padding-left: 0px;">
          <el-button size="medium" class="btn-info"  icon="el-icon-search" @click="search(1)">搜索</el-button>
          <el-button size="medium" class="btn-warning" style="margin-left: 1px"  icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
        </el-col>
      </el-row>

      <div class="title-buttons">
        <el-button  class="title-button btn-primary"  size="medium" @click="addShow=true;activityId=''" icon="el-icon-plus">导出&nbsp;</el-button>
      </div>
      <el-row :gutter="20">
        <!--<el-col :span="4">-->
        <!--<div class="me_title"  >原料分类</div>-->
        <!--<el-tree :data="treeData"  :props="defaultProps" style="height:400px;overflow-y:auto" :highlight-current="true" :expand-on-click-node="true" :default-expand-all="true" @node-click="handleNodeClick"></el-tree>-->
        <!--</el-col>-->
        <el-col :span="24">
          <el-table
            v-loading="loading"
            :data="tableData"
            :border="true"
            style="width: 100%">
            <el-table-column
              label="物料类别">
              <template  slot-scope="scope">
                <span>{{scope.row.category_name}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="物料编码">
              <template  slot-scope="scope">
                <span v-if="scope.row.no">{{scope.row.no}}</span>
                <span v-else>----</span>
              </template>
            </el-table-column>
            <el-table-column
              label="物料名称">
              <template  slot-scope="scope">
                <span v-if="scope.row.name">{{scope.row.name}}</span>
                <span v-else>----</span>
              </template>
            </el-table-column>
            <el-table-column
              label="门店订货数量">
              <template  slot-scope="scope">
                <span >{{scope.row.goods_spec}}</span>
              </template>
            </el-table-column>
            <el-table-column
            label="当前库存总量">
            <template  slot-scope="scope">
              <span >{{scope.row.unit}}</span>
            </template>
          </el-table-column>
            <el-table-column
              label="已配送总量">
              <template  slot-scope="scope">
                <span v-if="scope.row.count">{{scope.row.count.toFixed(2)}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="总部最低采购量">
              <template  slot-scope="scope">
                <span v-if="scope.row.count>=scope.row.min_stock && scope.row.count<=scope.row.max_stock">---</span>
                <span v-if="scope.row.count>scope.row.max_stock">高于最高库存</span>
                <span v-if="scope.row.count<scope.row.min_stock">低于最低库存</span>
              </template>
            </el-table-column>
            <el-table-column
              label="订货单位">
              <template  slot-scope="scope">
                <span v-if="scope.row.amount">{{scope.row.amount.toFixed(2)}}</span>
              </template>
            </el-table-column>
            <!--<el-table-column-->
            <!--label="查看" width="70">-->
            <!--<template  slot-scope="scope">-->
            <!--<router-link :to="'/materialCategorys/materials/show?id='+scope.row.id">-->
            <!--<span class="icon icon-chakanmingxi table-icon"></span>-->
            <!--</router-link>-->
            <!--</template>-->
            <!--</el-table-column>-->
          </el-table>
        </el-col>
      </el-row>
      <br>
      <!--<div class="block">-->
        <!--<el-row>-->
          <!--<el-col :span="24" class="text-right">-->
            <!--<el-pagination-->
              <!--@size-change="handleSizeChange"-->
              <!--@current-change="handleCurrentChange"-->
              <!--:current-page="currentPage"-->
              <!--:page-sizes="pageSizes"-->
              <!--:page-size="pageSize"-->
              <!--layout="total, sizes, prev, pager, next, jumper"-->
              <!--:total="total">-->
            <!--</el-pagination>-->
          <!--</el-col>-->
        <!--</el-row>-->
      <!--</div>-->
    </div>
    <PluginConfirm
      :show="dialogIsShow"
      @chooseSure="chooseSure()"
      @chooseCancel="chooseCancel()"
      @dialogResult="dialogResult">
    </PluginConfirm>
  </div>
</template>
<script>
  //注意路径
  export default{
    data(){
      return {
        treeData:[],
        defaultProps: {
          children: 'children',
          label:function(data){
            return "["+data.no+"]"+data.name;
          }
        },
        warehouseId:"",
        downCategeryId: [],
        categoryId:"",
        loading:false,
        tableData: [],
        pageSizes:window.pageSizes,//所有可选择的条数
        pageSize:window.pageSize,//控制一页显示的条数
        total:10,//总条数
        input:"",
        currentPage:1,
        inputValue:"",
        dialogIsShow:false,
        addShow:false,
        activityId:"",
        dialogIsShow:false,
        curDataRow:null,
        curDataIndex:0,
        selectItmeIndex:"",
        selectItemDetailsIndex:"",
        selectDelId:"",
        warehouses:[],
        yjSate:[{name:"高于最高库存",key:"max"},{name:"低于最低库存",key:"min"}],
        state:""

      }
    },
    created(){
      window.this = this;
      this.initData();
    },
    methods: {
      initData(){
        this.currentPage=1;
        this.getData();
      },
      keyDown(ev){
        if(ev.keyCode==13) {
          this.currentPage=1;
          this.inputValue=this.input;
          this.getData();
        }
      },
      cleanSearch(){
        this.currentPage=1;
        this.input="";
        this.warehouseId='';
        this.downCategeryId=[];
        this.state="";
        this.getData();
      },
      search(){
        this.currentPage=1;
        this.inputValue=this.input;
        this.getData();
      },
      handleCurrentChange(currentPage){
        this.currentPage=currentPage;
        this.getData();
      },
      getData(){
        // this.loading=true;
        var search="";
        var categoryId=""
        if( this.downCategeryId &&  this.downCategeryId.length>0){
          categoryId = this.downCategeryId[this.downCategeryId.length - 1];
          search="categoryId ="+categoryId+"&"+search;
        }
        console.log(this.warehouseId)
        if(this.warehouseId){
          search="warehouseId="+this.warehouseId +"&"+search;
        }
        if(this.input){
          search="keywords="+this.input +"&"+search;
        }
        if(this.state){
          search="flag="+this.state +"&"+search;
        }
       console.log(search)
        this.$axios.get("store/stocks?"+search).then((data)=>{
          this.loading=false
          this.tableData=data.content.stockList;
          this.warehouses=data.content.warehouses;
          var tree = data.content.treeData;
          this.newLabel(tree);
          this.treeData = tree;
        }).catch(function(err){
        })
      },
      handleDelete(index,delIndex,id) {
        this.selectItmeIndex=index,
          this.selectItemDetailsIndex=delIndex;
        this.selectDelId=id;
        this.dialogIsShow=true;
      },
      dialogResult(param){
        this.dialogIsShow=param.close;
        if(param.choose==="ok"){
          //console.log("确定");
          this.$axios.delete("materials/materialCategorys/"+this.selectDelId).then(data=>{
            if(data.status==200){
              this.tableData.splice(this.curDataIndex,1);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.initData();
            }else{
              this.$message({
                type: 'error',
                message: data.message
              });
            }
          })
        }else if(param.choose==="cancel"){
          //console.log("取消");
        }else{
          //console.log("不做处理");
        }
      },
      newLabel(newList) {
        if (newList) {
          for (var i = 0; i < newList.length; i++) {
            newList[i].label = newList[i].name;
            newList[i].value = newList[i].id + "";
            newList[i].children = null;
          }
        }
      },

      addSuccess(item){
        this.addShow=false;
        this.currentPage=1;
        this.initData();
      },

      addClose(){
        this.addShow=false;
      },
      handleSizeChange(val){
        this.pageSize=val;
        this.getData();
      },
    }
  }
</script>
<style scoped>
</style>
